<template>
  <div class="box">
    <div class="basicInfo">
      <div class="basicInfo_title">项目基本信息</div>
      <div class="basicInfo_content">
        <el-row :gutter="20" class="el_row">
          <el-col :span="8">
            <div class="basic">
              <strong>项目名称：</strong>
              {{info.name}}
            </div>
          </el-col>
          <el-col :span="8">
            <div class>
              <b>项目级别：</b>
              {{info.levelStr}}
            </div>
          </el-col>
          <el-col :span="8">
            <div class="basic">
              <strong>所属区县：</strong>
              {{info.districtName}}
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="el_row">
          <el-col :span="8">
            <div>
              <b>乡镇：</b>
              {{info.townName}}
            </div>
          </el-col>
          <el-col :span="8">
            <div class="basic">
              <strong>行政村：</strong>
              {{info.villageName}}
            </div>
          </el-col>
          <el-col :span="8">
            <div>
              <b>项目编号：</b>
              {{info.number}}
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="el_row">
          <el-col :span="8">
            <div class="basic">
              <strong>红线面积：</strong>
              {{info.hxmj}}公顷
            </div>
          </el-col>
          <el-col :span="8">
            <div>
              <b>减少建设用地面积：</b>
              {{info.yjjsj}}公顷
            </div>
          </el-col>
          <el-col :span="8">
            <div class="basic">
              <strong>实施规模：</strong>
              {{info.ssgm}}公顷
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="el_row">
          <el-col :span="8">
            <div>
              <b>指标使用类型：</b>
              {{info.projectIndexName}}
            </div>
          </el-col>
          <!-- <el-col :span="8">
            <div class="basic">
              <strong>是否涉及户改：</strong>
              {{info.isReformName=='YES'?'是':(info.isReformName=='NO'?'否':'')}}
            </div>
          </el-col>-->
          <el-col :span="8">
            <div>
              <b>项目类型：</b>
              {{info.projectTypeName}}
            </div>
          </el-col>
        </el-row>

        <!-- <el-row class="el_row">
          <el-col :span="12">
            <div class="basic basicInput">
              <div class="basicInput_title">是否属于收益权质押项目：</div>
              <div class="basicInput_input">
                <el-select v-model="isBelongProfitPledgeProject" @change='isShouyaValue' placeholder="请选择是否">
                <el-select v-model="isBelongProfitPledgeProject" placeholder="请选择是否">
                  <el-option label="是" value="YES"></el-option>
                  <el-option label="否" value="NO"></el-option>
                </el-select>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="basicInput">
              <div class="basicInput_title basicInput_title1">是否动用户改周转金：</div>
              <div class="basicInput_input">
                <el-select v-model="isChangeUserWorkingCapital" @change="isQidongValue" placeholder="请选择是否">
                <el-select v-model="isChangeUserWorkingCapital" placeholder="请选择是否">
                  <el-option label="是" value="YES"></el-option>
                  <el-option label="否" value="NO"></el-option>
                </el-select>
              </div>
            </div>
          </el-col>
        </el-row>-->
      </div>
    </div>

    <div class="basicInfo">
      <div class="basicInfo_title">建设信息</div>
      <div class="basicInfo_content basicInfo_two">
        <el-row :gutter="20" class="el_row">
          <el-col :span="8">
            <div class="basic">
              <strong>预计建设规模：</strong>
              {{info.jsgm}}公顷
            </div>
          </el-col>
          <el-col :span="8">
            <div class>
              <b>预计新增耕地面积：</b>
              {{info.xzgdmj}}公顷
            </div>
          </el-col>
          <el-col :span="8">
            <div class="basic">
              <strong>预计新增耕地比例：</strong>
              {{info.xzgdbl}}
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="el_row">
          <el-col :span="8">
            <div>
              <b>预计新增耕地亩均投资：</b>
              {{info.xzgdmjtz}}万元/亩
            </div>
          </el-col>
          <el-col :span="8">
            <div class="basic">
              <strong>预计建设规模均投资：</strong>
              {{info.jsgmtz}}万元/亩
            </div>
          </el-col>
          <el-col :span="8">
            <div>
              <b>预计建新规模：</b>
              {{info.jxgm}}公顷
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="el_row">
          <el-col :span="8">
            <div class="basic basicInput">
              <p class="basicInput_title">预计建设开始时间：</p>
              <div>
                <!-- <el-date-picker v-model="startTime" type="date" placeholder="选择日期"></el-date-picker> -->
                <el-date-picker
                  :readonly="!isProgressShow"
                  v-model="startTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期时间"
                ></el-date-picker>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="basicInput">
              <p class="basicInput_title basicInput_title1">预计建设结束时间：</p>
              <div>
                <!-- <el-date-picker v-model="endTime" type="date" placeholder="选择日期"></el-date-picker> -->
                <el-date-picker
                  :readonly="!isProgressShow"
                  v-model="endTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期时间"
                ></el-date-picker>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="basic basicInput">
              <p class="basicInput_title">资金来源：</p>
              <div>
                <!-- <el-select v-model="moneySource" @change="fundSource" placeholder="请选择资金来源"> -->
                <el-select v-model="moneySource" placeholder="请选择资金来源" :disabled="!isProgressShow">
                  <!-- <el-option label="信贷资金" value="CREDIT_FUND"></el-option> -->
                  <el-option
                    v-for="(item,index) in fundSourceList"
                    :key="index"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <div class="basicInfo">
      <div class="basicInfo_title">入库备案复垦点权利人信息</div>

      <div class="basicInfo_content">
        <div class="select_bxo">
          <div>权利人姓名</div>
          <el-input v-model="power" class="input" @blur="getQueryLand" />
          <el-button type="primary" @click="searchPower">查询</el-button>
        </div>
        <el-table
          :data="landList"
          :header-cell-style="{background:'#f9f9f9',color:'#606266',fontSize:'12px'}"
          border
          style="width: 100%"
        >
          <el-table-column prop="pkh" label="片块号" fixed min-width="150" align="center">
            <template slot-scope="scope">
              {{ scope.row.pkh }}
              <!-- <span style="color:#138ae2;"></span> -->
            </template>
          </el-table-column>
          <el-table-column prop="qlr" label="权利人" width="100" align="center"></el-table-column>
          <el-table-column prop="idCard" label="身份证号" width="180" align="center"></el-table-column>
          <el-table-column prop="mobilePhone" label="手机号码" width="120" align="center"></el-table-column>
          <el-table-column prop="townName" label="所在乡镇" width="110" align="center"></el-table-column>
          <el-table-column prop="villageName" label="村/居委会" width="100" align="center"></el-table-column>
          <el-table-column prop="sdzjd" label="农村宅基地" width="100" align="center"></el-table-column>
          <el-table-column prop="sdfsyd" label="宅基地附属用地面积" width="140" align="center"></el-table-column>
          <el-table-column prop="yjjsj" label="预计减少建设用地面积" width="150" align="center"></el-table-column>
          <el-table-column prop="yjzjn" label="预计增加农用地面积" width="140" align="center"></el-table-column>
          <el-table-column prop="yjzjg" label="预计增加耕地面积" width="130" align="center"></el-table-column>
          <el-table-column prop="yjzjl" label="预计增加林地面积" width="130" align="center"></el-table-column>
          <el-table-column prop="yjzjy" label="预计增加园地面积" width="130" align="center"></el-table-column>
          <el-table-column prop="yjzjq" label="预计增加其他农用地面积" width="160" align="center"></el-table-column>
          <el-table-column label="操作" fixed="right" width="300" align="center">
            <!--   -->
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="btn_seeImg(scope.row.positionPhotos)"
              >查看图片</el-button>
              <el-button size="mini" @click="changeLnglat(scope.row)">地理定位</el-button>
              <el-button
                size="mini"
                v-if="isProgressShow"
                type="success"
                @click="btn_see(scope.row)"
              >编辑</el-button>
              <!-- -->
            </template>
          </el-table-column>
        </el-table>
        <div class="pageStyle">
          <el-pagination
            @size-change="showSize"
            @current-change="showPage"
            :current-page="needInfo.page"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="needInfo.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalPage"
          ></el-pagination>
        </div>
      </div>
    </div>

    <div class="basicInfo">
      <div class="basicInfo_title">附件信息</div>
      <div class="basicInfo_content basicInfo_fujian">
        <!-- <div class="basic_row">
          <p>入库备案资料模板</p>
          <el-button class="btnUpload" @click="downloadModel">下载</el-button>
        </div>-->
        <div class="basic_row">
          <p>入库备案资料</p>
          <div class="upLoadImg" v-if="isProgressShow">
            <!-- <p>{{fileData.fileName}}</p> -->
            <upload @beforeUpload="beforeUpload" @res="getRes" :accept="'.zip'" />
            <!-- <input ref="referenceUpload" accept=".zip" type="file" @change="changeFile" /> -->
          </div>
        </div>
      </div>
    </div>

    <div v-if="tableData.length > 0" class="uploadResult">
      <div class="marginTop20">
        <div class="title">上传结果</div>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="fileName" label="附件名称"></el-table-column>
          <el-table-column prop label="上传结果">
            <template slot-scope="scope">
              <span
                :class="scope.row.flag=='true'?'':'uploadQuestionsTitle'"
              >{{scope.row.flag=='true'?'上传成功':'上传失败'}}</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="pageStyle">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="needInfo.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="needInfo.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </div>
    <div class="btn" v-if="isProgressShow">
      <el-button
        size="medium"
        :disabled="noUpload"
        type="primary"
        :loading="isLoading"
        @click="btn_progress"
      >提交</el-button>
      <el-button size="medium" @click="btn_cancel">取消</el-button>
    </div>
    <!-- 编辑片块 -->
    <el-dialog :close-on-click-modal="false" title="编辑" :visible.sync="landDialog" width="30%">
      <el-form ref="form" :model="form" :rules="rules" class="demo-ruleForm" label-width="100px">
        <!-- <el-form-item label="片块号">
          <el-input v-model="form.landName" placeholder="请输入"></el-input>
        </el-form-item>-->
        <el-form-item label="权利人" prop="qlr">
          <el-input v-model="form.qlr" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="idCard">
          <el-input v-model="form.idCard" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="mobilePhone">
          <el-input v-model="form.mobilePhone" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="原因" prop="cause">
          <el-input v-model="form.cause" type="textarea" rows="3" placeholder="请输入"></el-input>
        </el-form-item>
        <!-- <el-form-item label="所在乡镇">
          <el-input v-model="form.townName" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="村/居委会">
          <el-input v-model="form.villageName" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="农村宅基地">
          <el-input placeholder="请输入" v-model="form.nczjd">
            <template slot="append">m²</template>
          </el-input>
        </el-form-item>
        <el-form-item label="宅基地附属用地面积">
          <el-input placeholder="请输入" v-model="form.zjdfs">
          </el-input>
        </el-form-item>
        <el-form-item label="预计减少建设用地面积">
          <el-input placeholder="请输入" v-model="form.yjjsj">
          </el-input>
        </el-form-item>
        <el-form-item label="预计增加农用地面积">
          <el-input placeholder="请输入" v-model="form.yjzjn">
          </el-input>
        </el-form-item>
        <el-form-item label="预计增加耕地面积">
          <el-input placeholder="请输入" v-model="form.yjzjg">
          </el-input>
        </el-form-item>
        <el-form-item label="预计增加林地面积">
          <el-input placeholder="请输入" v-model="form.yjzjl">
          </el-input>
        </el-form-item>
        <el-form-item label="预计增加园地面积">
          <el-input placeholder="请输入" v-model="form.yjzjy">
          </el-input>
        </el-form-item>
        <el-form-item label="预计增加其他农用地面积">
          <el-input placeholder="请输入" v-model="form.yjzjq">
          </el-input>
        </el-form-item>-->
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="landDialog = false">取 消</el-button>
        <el-button type="primary" @click="btnEditLand">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" title="查看图片" :visible.sync="seeImgDialog" width="50%">
      <div class="seeImg">
        <ul v-if="imgArr.length!=0">
          <li v-for="(item,index) in imgArr" :key="index">
            <p>{{item.fileName}}</p>
            <img :src="$https+item.filePath" />
          </li>
        </ul>
        <div class="noData" v-if="imgArr.length==0">暂无图片</div>
      </div>
    </el-dialog>
    <!-- 地理定位 -->
    <el-dialog :close-on-click-modal="false" :title="titleLandName" :visible.sync="positionDialog" class="errorBox">
      <tdMap class="mapBox_right" ref="tdMap" :pkList="mainData" :isShowControls="false" />
    </el-dialog>
  </div>
</template>

<script>
import upload from '@/components/upload'
import {
  queryLand,
  queryBasicAndBuildInfo,
  editLand,
  saveInfo,
  queryFundSource,
  queryStoringRecordFile,
  storingRecordResultCommit
} from '@/api/storageForRecordInfo'
import tdMap from '@/components/tdMap'
export default {
  components: {
    upload,
    tdMap
  },
  data() {
    return {
      noUpload: false,
      startTime: '',
      endTime: '',
      title: '',
      input: '',
      power: '', //权利人
      landDialog: false,
      landList: [], //片块信息
      loading: false,
      needInfo: {
        page: 1,
        size: 5
      },
      totalPage: 0, //总页数
      info: '',
      rules: {
        qlr: [{ required: true, message: '请输入权利人', trigger: 'blur' }],
        idCard: [
          { required: true, message: '请输入身份证号', trigger: 'blur' }
        ],
        mobilePhone: [
          { required: true, message: '请输入手机号', trigger: 'blur' }
        ],
        cause: [{ required: true, message: '请输入原因', trigger: 'blur' }]
      },
      form: {
        landId: '',
        landName: '',
        qlr: '',
        idCard: '',
        mobilePhone: '',
        townName: '',
        villageName: '',
        nczjd: '',
        zjdfs: '',
        yjjsj: '',
        yjzjn: '',
        yjzjg: '',
        yjzjl: '',
        yjzjy: '',
        yjzjq: '',
        qt: '',
        tfh: '',
        tbh: '',
        statusMapId: '',
        cause: ''
      },
      isBelongProfitPledgeProject: '', //是否属于收益权质押项目
      isChangeUserWorkingCapital: '', //是否动用户改周转金
      moneySource: null, //资金来源
      uploadText: '上传',
      fileData: {
        fileName: '',
        fileUrl: '',
        id: ''
      },
      fundSourceList: [],
      seeImgDialog: false,
      isLoading: false,

      errorBoxFlag: false,
      updateMessage: [],
      errData: '', //错误文件

      imgArr: [], //图片数据

      positionDialog: false, //地理定位弹框
      titleLandName: '',
      list: [],

      tableData: [], //复垦文件列表

      isResult: false, //上传文件结果回显
      needInfo: {
        page: 1,
        size: 10
      },
      total: 0,
      isProgressShow: false, //是否显示操作按钮

      mainData: []
    }
  },
  created() {
    if (localStorage.getItem('router') == 'STORING_RECORD_SAVE') {
      this.isProgressShow = true
    } else {
      this.isProgressShow = false
      this.isResult = true
      // this.getEntryFujian()
    }

    if(localStorage.getItem("lookStatus") == 2){
      this.isProgressShow = false
      this.isResult = true
    }
    this.getEntryResult()
    this.getBasicAndBuildInfo()
    this.getQueryLand() //查询片块信息
    this.getQueryFundSource() //资金来源
  },
  methods: {
    btn_progress() {
      if (this.startTime == '') {
        this.$message({
          message: '请选择预计建设开始时间',
          type: 'warning'
        })
        return
      }
      if (this.endTime == '') {
        this.$message({
          message: '请选择预计建设结束时间',
          type: 'warning'
        })
        return
      }
      if (this.moneySource == null || this.moneySource == '') {
        this.$message({
          message: '请选择资金来源',
          type: 'warning'
        })
        return
      }

      let obj = {
        projectId: localStorage.getItem('projectId'),
        planConstructingStartTime: this.startTime,
        planConstructingEndTime: this.endTime,
        fundSource: this.moneySource
      }
      this.isLoading = true
      storingRecordResultCommit(obj)
        .then(res => {
          this.isLoading = false
          if (res.code == 1000) {
            this.$alert('当前流程办理完成', '提示', {
              confirmButtonText: '确定',
              callback: action => {
                this.$router.push({
                  path: '/xmkgh/ywdeal'
                })
              }
            })
          }
        })
        .catch(error => {
          this.isLoading = false
        })
    },
    changeLnglat(row) {
      this.mainData = []
      this.positionDialog = true
      this.titleLandName = row.pkh
      this.$nextTick(() => {
        this.mainData.push(row)
      })
      // this.$refs.tdMap.changePkPosition(scope.$index);
    },

    //上传前
    beforeUpload() {
      this.isLoading = true
    },
    //上传后
    getRes(res) {
      console.log(res)
      this.fileData.fileName = res.data.fileName
      this.fileData.fileUrl = res.data.filePath
      this.fileData.id = res.data.id
      this.noUpload = false
      this.isLoading = false
      this.$message({
        message: '上传成功',
        type: 'success'
      })
      this.$nextTick(() => {
        this.btn_project()
      })
    },
    btn_seeImg(imgPath) {
      //查看图片
      console.log(imgPath, 'imgPath')
      this.imgArr = imgPath
      this.seeImgDialog = true
    },
    getQueryFundSource() {
      //资金来源
      queryFundSource().then(res => {
        console.log(res, 'zjin')
        this.fundSourceList = res.data
      })
    },
    downloadModel() {
      var a = document.createElement('a')
      a.setAttribute(
        'href',
        this.$https +
          '/pc/file/result/template/download?achievement=R_T_R_K_B_A_Z_L_M_B'
      )
      a.setAttribute('download', '') // download属性
      a.click()
    },
    btn_project() {
      let obj = {
        projectId: localStorage.getItem('projectId'),
        //isBelongProfitPledgeProject: this.isBelongProfitPledgeProject,
        // isChangeUserWorkingCapital: this.isChangeUserWorkingCapital,
        planConstructingStartTime: this.startTime,
        planConstructingEndTime: this.endTime,
        fundSource: this.moneySource,
        storingRecordDataFileId: this.fileData.id
      }
      this.isLoading = true
      saveInfo(obj).then(res => {
        if (res.code == 1000) {
          this.isLoading = false
          this.btn_cancel()
        }
        this.getBasicAndBuildInfo()
        this.getEntryResult()
        this.isResult = true
      })
    },
    getEntryResult() {
      //上传结果回显
      let obj = {
        projectId: localStorage.getItem('projectId'),
        page: this.needInfo.page,
        size: this.needInfo.size
      }
      queryStoringRecordFile(obj).then(res => {
        this.tableData = res.data.rows || []
        this.total = res.data.total
      })
    },
    handleSizeChange(val) {
      this.needInfo.size = val
      this.getEntryResult()
    },
    handleCurrentChange(val) {
      this.needInfo.page = val
      this.getEntryResult()
    },
    btn_cancel() {
      //取消
      this.isBelongProfitPledgeProject = ''
      this.isChangeUserWorkingCapital = ''
      this.startTime = ''
      this.endTime = ''
      this.moneySource = null
      this.fileData = {
        fileName: '',
        fileUrl: '',
        id: ''
      }
      this.form = {
        id: '',
        landId: '',
        landName: '',
        qlr: '',
        idCard: '',
        mobilePhone: '',
        townName: '',
        villageName: '',
        nczjd: '',
        zjdfs: '',
        yjjsj: '',
        yjzjn: '',
        yjzjg: '',
        yjzjl: '',
        yjzjy: '',
        yjzjq: '',
        qt: '',
        tfh: '',
        tbh: '',
        statusMapId: ''
      }
    },
    getBasicAndBuildInfo() {
      //查询项目基本信息和建设信息
      let obj = {
        projectId: localStorage.getItem('projectId')
      }
      queryBasicAndBuildInfo(obj).then(res => {
        this.info = res.data
        this.startTime = res.data.planConstructingStartTime
        this.endTime = res.data.planConstructingEndTime
        this.moneySource = res.data.fundSource
      })
    },
    getQueryLand() {
      //查询片块信息
      let obj = {
        projectId: localStorage.getItem('projectId'),
        page: this.needInfo.page,
        size: this.needInfo.size
      }
      let loadingInstance = this.$loading(this.$loadingData)
      queryLand(obj)
        .then(res => {
          loadingInstance.close()
          this.list = res.data.rows
          this.landList = res.data.rows
          this.totalPage = res.data.total
        })
        .catch(() => {
          loadingInstance.close()
        })
    },
    searchPower() {
      let obj = {
        projectId: localStorage.getItem('projectId'),
        page: this.needInfo.page,
        size: this.needInfo.size,
        qlr: this.power
      }
      queryLand(obj).then(res => {
        this.landList = res.data.rows
        this.totalPage = res.data.total
      })
    },
    showPage(val) {
      this.needInfo.page = val
      this.getQueryLand()
    },
    showSize(val) {
      this.needInfo.size = val
      this.getQueryLand()
    },
    btnEditLand() {
      //编辑片块号
      const that = this
      this.$refs['form'].validate(valid => {
        if (valid) {
          let obj = {
            id: that.form.id,
            qlr: that.form.qlr,
            idCard: that.form.idCard,
            mobilePhone: that.form.mobilePhone,
            landId: that.form.landId,
            changeReason: that.form.cause
          }
          editLand(obj).then(res => {
            if (res.code == 1000) {
              that.landDialog = false
              that.getQueryLand()
              that.$message({
                message: '成功',
                type: 'success'
              })
              this.getQueryLand()
            } else {
              that.$message({
                message: res.msg,
                type: 'error'
              })
            }
          })
        } else {
          return false
        }
      })
    },
    btn_see(rowInfo) {
      //获取当前行信息
      this.form = {
        id: rowInfo.id,
        landId: rowInfo.landId,
        //landName: rowInfo.landName,
        qlr: rowInfo.qlr,
        idCard: rowInfo.idCard,
        mobilePhone: rowInfo.mobilePhone
        // townName: rowInfo.townName,
        // villageName: rowInfo.villageName,
        // nczjd: rowInfo.nczjd,
        // zjdfs: rowInfo.zjdfs,
        // yjjsj: rowInfo.yjjsj,
        // yjzjn: rowInfo.yjzjn,
        // yjzjg: rowInfo.yjzjg,
        // yjzjl: rowInfo.yjzjl,
        // yjzjy: rowInfo.yjzjy,
        // yjzjq: rowInfo.yjzjq,
        // qt: rowInfo.qt,
        // tfh: rowInfo.tfh,
        // tbh: rowInfo.tbh,
        // statusMapId: rowInfo.statusMapId
      }
      this.landDialog = true
    }
  }
}
</script>

<style lang="scss" scoped>
.form /deep/ .el-input__inner {
  width: 200px;
}
</style>

<style lang="scss" scoped>
.pageStyle {
  text-align: center;
  margin: 20px;
}
.noData {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: #666;
}
.seeImg {
  text-align: center;
  // display: flex;
  // align-items: center;
  overflow: hidden;
}
.seeImg ul,
.seeImg li {
  list-style: none;
}
.seeImg li {
  float: left;
}
.seeImg li img {
  width: 400px;
  height: 400px;
  margin-right: 20px;
  margin-bottom: 20px;
}
.upLoadImg {
  display: flex;
  align-items: center;
  p {
    margin-left: 20px;
  }
}
.box {
  margin: 30px;
  border: 1px solid #efefef;
  border-top: none;
  border-radius: 5px;
  // background: #fff;
  .box_ifram {
    width: 600px;
    height: 400px;
    border: 1px solid black;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -25%;
    margin-top: -10%;
  }

  .basicInfo {
    .basicInfo_title {
      height: 50px;
      background: #f8f8f8;
      padding: 0px 30px;
      line-height: 50px;
      color: #333;
      font-size: 18px;
      font-weight: bold;
      border-top: 1px solid #efefef;
      border-bottom: 1px solid #efefef;
    }

    .basicInfo_content {
      padding: 30px 40px;

      .select_bxo {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        div {
          font-size: 14px;
          color: #444;
        }
        .input {
          width: 200px;
          margin: 0px 20px 0px 10px;
        }
      }
      /deep/ .el_row {
        margin-bottom: 30px;
        div {
          font-size: 13px;
          color: #606266;

          b,
          strong {
            color: #444444;
          }
        }
        .basicInput {
          font-size: 13px;
          color: #606266;

          .basicInput_title {
            color: #444444;
            font-weight: bold;
          }
          // .basicInput_title1 {
          //   width: 210px;
          //   text-align: right;
          //   margin-right:10px;
          // }
        }
      }
    }

    .basicInfo_content_title {
      display: flex;
      // justify-content: space-between;
    }
  }
  .basic_row {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #444;
    font-weight: bold;
    margin-bottom: 25px;
    span {
      margin-right: 20px;
    }
    .btnUpload {
      width: 80px;
    }
  }
  .btn {
    // text-align: center;
    margin-bottom: 20px;
    margin-left: 50px;
  }
}
.basicInfo_fujian .basic_row p {
  width: 120px;
  margin-right: 20px;
  text-align: right;
}
.uploadResult {
  font-size: 14px;
  margin: 0 40px;
}
.uploadQuestionsTitle {
  color: #c40000;
}
.marginTop20 {
  margin-top: 15px;
}
.boxItem_content_row_item_input_input {
  width: 200px;
}
.pageStyle {
  text-align: center;
  margin: 20px;
}
.title {
  width: 100%;
  height: 50px;
  font-size: 16px;
  line-height: 50px;
  border-bottom: none;
  font-weight: bold;
  color: #666;
}
.mapBox_right {
  height: 500px;
}
</style>
